import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/AntDesign';
import Home from '../Home';
import Fa from '../Fa';
import Liao from '../Liao';
import My from '../My';

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#4B7BE5',
        tabBarInactiveTintColor: '#999999',
        tabBarStyle: {
          backgroundColor: '#fff',
          height: 50,
        },
        headerShown: false,
      }}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: '首页',
          tabBarIcon: ({ color, size }) => (
            <Icon name="home" size={22} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Fa"
        component={Fa}
        options={{
          tabBarLabel: '发现',
          tabBarIcon: ({ color, size }) => (
            <Icon name="eyeo" size={22} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Liao"
        component={Liao}
        options={{
          tabBarLabel: '聊天',
          tabBarIcon: ({ color, size }) => (
            <Icon name="message1" size={22} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="My"
        component={My}
        options={{
          tabBarLabel: '我的',
          tabBarIcon: ({ color, size }) => (
            <Icon name="user" size={22} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;
